<template>
  <div class="student-list">
    <el-collapse>
      <el-collapse-item v-for="data in listData" :key="data.id">
        <template #title>
          <p class="list-title">
            {{ data.lessonName }}
            <span>{{ data.students.length }}人做错</span>
          </p>
        </template>
        <p v-for="student in data.students" :key="student.id" class="list-content">{{ student.studentName }}<span @click="seeAllWrong(student)">查看全部错题<i class="iconfont icongengduoxiayibu"></i></span></p>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>
<script lang="ts">
import { ref } from 'vue'
import $ from '$'
import { ElMessage } from 'element-plus'
import SeeAllWrongComponent from './see-all-wrong.vue'

export default {
  props: {
    params: {
      type: Object,
      default: () => ({})
    },
    questionId: String
  },

  setup (props) {
    let listData = ref()
    const request = () => {
      if (!props.params.currentIndex) {
        $.http.json('/admin/userErrorQuestion/queryErrorStudent', { ...props.params, questionId: props.questionId }).then(res => {
          if (res.result) {
            listData.value = res.json
            listData.value = listData.value.map(n => ({
              ...n,
              ...{
                lessonName: n.className,
                students: n.students.map((s) => ({
                  ...s,
                  ...{
                    studentName: s.name
                  }
                }))
              }
            }))
          } else {
            ElMessage.error(res.msg)
          }
        })
      } else {
        $.http.json('/admin/lessonSummaryDetails/queryWrongStudentGroupByLessonId', { ...props.params, questionId: props.questionId }).then(res => {
          if (res.result) {
            listData.value = res.json
          } else {
            ElMessage.error(res.msg)
          }
        })
      }
    }
    request()
    const seeAllWrong = (student) => {
      $.screen.create( SeeAllWrongComponent, { student, params: props.params }, { zIndex: '2099', hiddenBack: false })
    }
    return { request, listData, seeAllWrong }
  }
}
</script>

<style lang="scss" scoped>
  .student-list {
    .list-title {
      display: flex;
      width: 100%;
      & > span {
        margin-left: auto;
        color: #666666;
      }
    }
    .list-content {
      padding-left: 10px;
      line-height: 36px;
      display: flex;
      & > span {
        margin-left: auto;
        color: #666666;
        cursor: pointer;
        i {
          font-size: 6px;
          margin-left: 2px;
        }
      }
    }
  }
 :deep(.el-collapse-item__header) {
   padding: 0 20px;
 }
 :deep(.el-collapse-item__content) {
   padding: 0 20px;
 }
</style>